<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择框</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <script src="../../res/layui/layui.js"></script>
</head>
<body>

<!--内容-->
<div>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">省：</label>
                <div class="layui-input-inline">
                    <select id="provinceSelector" name="provinceSelector" lay-filter="province">
                        <option value="-">请选择</option>
                        <option value="A">A省</option>
                        <option value="B">B省</option>
                        <option value="C">C省</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">市：</label>
                <div class="layui-input-inline">
                    <select id="citySelector" name="citySelector">
                        <option value="-">请选择</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>

<!--脚本-->
<script>
    const province2city = {
        "A": ["a1", "a2", "a3"],
        "B": ["b1", "b2", "b3"],
        "C": ["c1", "c2", "c3"]
    };

    layui.use(["jquery", "form"], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var provinceSelector = $("#provinceSelector");
        var citySelector = $("#citySelector");

        changeCity();

        form.on("select(province)", function (data) {
            changeCity();
        });

        function changeCity() {

            // 1.删除旧选项
            citySelector.empty();
            // document.getElementById("citySelector").innerText = "";

            // 2.生成新选项
            const selectedProvince = provinceSelector.val();
            console.log("省：", selectedProvince);
            switch (selectedProvince) {
                case "A":
                    citySelector.append(" <option value='-'>请选择</option>")
                    citySelector.append(" <option value='a1'>a1市</option>")
                    citySelector.append(" <option value='a2'>a2市</option>")
                    citySelector.append(" <option value='a3'>a3市</option>")
                    break;
                case "B":
                    citySelector.append(" <option value='-'>请选择</option>")
                    citySelector.append(" <option value='b1'>b1市</option>")
                    citySelector.append(" <option value='b2'>b2市</option>")
                    citySelector.append(" <option value='b3'>b3市</option>")
                    break;
                case "C":
                    citySelector.append(" <option value='-'>请选择</option>")
                    citySelector.append(" <option value='c1'>c1市</option>")
                    citySelector.append(" <option value='c2'>c2市</option>")
                    citySelector.append(" <option value='c3'>c3市</option>")
                    break;
                default:
                    citySelector.append(" <option value='-'>请选择</option>")
                    citySelector.append(" <option value='a1'>a1市</option>")
                    citySelector.append(" <option value='a2'>a2市</option>")
                    citySelector.append(" <option value='a3'>a3市</option>")
                    citySelector.append(" <option value='b1'>b1市</option>")
                    citySelector.append(" <option value='b2'>b2市</option>")
                    citySelector.append(" <option value='b3'>b3市</option>")
                    citySelector.append(" <option value='c1'>c1市</option>")
                    citySelector.append(" <option value='c2'>c2市</option>")
                    citySelector.append(" <option value='c3'>c3市</option>")
            }

            form.render("select");

        }
    });
</script>


</body>
</html>